<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>星座运势查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #f0f0f0;
            padding: 10px;
            text-align: center;
        }
        h1 {
            font-size: 1.5em;
        }
        .main {
            padding: 20px;
        }
        section {
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        select, button {
            width: 100%;
            padding: 10px;
            font-size: 1em;
        }
        .result {
            background-color: #f4f4f4;
            padding: 10px;
            overflow: auto;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<header>
    <h1>星座运势查询</h1>
</header>
<section class="main">
    <div class="form-group">
        <label for="zodiac">选择星座：</label>
        <select id="zodiac">
            <option value="aries">白羊座</option>
            <option value="taurus">金牛座</option>
            <option value="gemini">双子座</option>
            <option value="cancer">巨蟹座</option>
            <option value="leo">狮子座</option>
            <option value="virgo">处女座</option>
            <option value="libra">天秤座</option>
            <option value="scorpio">天蝎座</option>
            <option value="sagittarius">射手座</option>
            <option value="capricorn">摩羯座</option>
            <option value="aquarius">水瓶座</option>
            <option value="pisces">双鱼座</option>
        </select>
    </div>
    <div class="form-group">
        <label for="time">选择时间：</label>
        <select id="time">
            <option value="today">今日</option>
            <option value="nextday">明日</option>
            <option value="week">本周</option>
            <option value="month">本月</option>
        </select>
    </div>
    <button onclick="fetchHoroscope()">查询运势</button>
    <div class="result" id="result"></div>
</section>

<script>

    function capitalize(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }

    function getTimeLabel(time) {
        switch(time) {
            case 'today': return '今日';
            case 'nextday': return '明日';
            case 'week': return '本周';
            case 'month': return '本月';
            default: return '';
        }
    }

    function renderHoroscope(data) {
        return `
        <p><strong>综合运势：</strong>${data.data.fortunetext.all}</p>
        <p><strong>爱情运势：</strong>${data.data.fortunetext.love}</p>
        <p><strong>事业学业：</strong>${data.data.fortunetext.work}</p>
        <p><strong>财富运势：</strong>${data.data.fortunetext.money}</p>
        <p><strong>健康运势：</strong>${data.data.fortunetext.health}</p>
      `;
    }
    function fetchHoroscope() {
        const zodiac = document.getElementById('zodiac').value;
        const time = document.getElementById('time').value;
        const resultDiv = document.getElementById('result');
        const url = `https://api.vvhan.com/api/horoscope?type=${zodiac}&time=${time}`;
        console.log(url);
        fetch(url)
            .then(response => response.json())
            .then(data => {
                resultDiv.innerHTML = `
            <h3>${zodiac.toUpperCase()} - ${time}</h3>
              ${renderHoroscope(data)}
          `;
            })
            .catch(error => {
                resultDiv.innerHTML = `<p>查询失败，请稍后重试。</p>`;
                console.error('Error fetching horoscope:', error);
            });
    }
</script>
</body>
</html>
